<template>
  <div>
    <!-- <div class="run_info">
      <div>告警统计</div>
    </div> -->
    <div id="chart">
      <Empty v-if="isEmpty" class="is_empty" :image="simpleImage" />
    </div>
    <div class="run_info">
      <div>每日告警详情</div>
      <div>
        <Select
          v-model:value="selected"
          :options="sysMonthOptions"
          style="width: 120px"
          @change="onChange"
        ></Select>
      </div>
    </div>
    <div>
      <BoTable
        :columns="columns"
        :request="_request"
        ref="tableRef"
        height="auto"
        hideSearch
      ></BoTable>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { computed, nextTick, ref } from 'vue';
import { BoTable, BoTableProps } from '@boeyo/ui';
import { Empty, Select, message } from 'ant-design-vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { deviceError, errorStatistics } from '../api';

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const props = defineProps({
  stationId: {
    type: String,
    default: '',
  },
});
const isEmpty = ref(false);
let chart;
const { stationId } = props;
const sysMonthOptions = ref([]);
const getInfo = async () => {
  try {
    const result: any = await errorStatistics({ stationId });
    if (result.code !== 200 || !result.data || !result.data.length) {
      isEmpty.value = true;
      message.info('暂无告警数据!');
      return;
    }

    const data = result.data;
    sysMonthOptions.value = data.map((i) => {
      return {
        label: i.date,
        value: i.date,
      };
    });
    selected.value =
      sysMonthOptions.value[sysMonthOptions.value.length - 1]?.value;
    nextTick(() => {
      init(data);
    });
  } catch (error) {
    isEmpty.value = true;
  }
};
getInfo();
const init = (data) => {
  const xData = data.map((i) => i.date);
  const seriesData = data.map((i) => i.count);
  if (chart) chart.clear();
  const node = document.querySelector('#chart');
  chart = echarts.init(node);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#d4e5ff',
        },
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xData,
        axisLabel: {
          show: true,
          color: '#fff',
        },
      },
    ],
    yAxis: [
      {
        // name: '延时ms',
        nameTextStyle: {
          color: '#fff',
        },
        type: 'value',
        splitLine: {
          //show: false,
          lineStyle: {
            color: 'rgba(255,255,255,0.26)',
            type: 'dashed',
          },
        },
        axisLabel: {
          show: true,
          color: '#fff',
        },
      },
    ],
    series: [
      {
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#40A5FD',
        },
        data: seriesData,
      },
    ],
  };
  chart.setOption(option);
  addEventListener('resize', function () {
    chart.resize();
  });
};
const _request = async (params: any) => {
  return await deviceError({
    ...params,
    stationId,
    date: selected.value,
  });
};

const selected = ref();
const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '告警时间',
    dataIndex: 'time',
  },
  // {
  //   title: '告警类型',
  //   dataIndex: 'infoKey',
  // },
  {
    title: '告警描述',
    dataIndex: 'messageContent',
  },
]);

const tableRef = ref();
const onChange = () => {
  tableRef.value.refresh();
};
</script>

<style lang="scss" scoped>
#chart {
  width: 100%;
  height: 30vh;
}
.run_info {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  & > div {
    font-weight: 700;
  }
}
</style>
